<template>
  <div class="container flow-column h100">
    <div class="container-main h100">
      <list-table-new v-bind="tableSetting" ref="tableRef"></list-table-new>
      <dialogPublic
        :title="dialogTitle"
        :show.sync="showDialog"
        @doSubmit="dialogSubmit"
        @doClose="() => (showDialog = false)"
        fullscreen
      >
        <component ref="dialogRef" :is="isComponent" v-if="showDialog" />
      </dialogPublic>
    </div>
  </div>
</template>
<script>
import historyImport from "./historyImport";
import sampleImport from "./sampleImport";
import { getWorkTicketList } from "@/api/twoTicketManagement/workTicket.js";
export default {
  components: {
    historyImport,
    sampleImport,
  },
  data() {
    return {
      showDialog: false, // 显示弹框
      dialogTitle: "", // 弹框标题
      isComponent: "", // 弹框组件
      tableSetting: {
        singleRow: true,
        defaultQueryFirst: true,
        showCustomBtn: true, //显示自定义列
        showFilterBtn: true, //显示过滤器
        pageConfig: {
          pageCode: "workTicketProcessing", //页面标识，用来存储过滤器以及自定义列信息
          userId: this.$store.getters.userInfo.id,
        },
        // 搜索框
        searchObj: {
          searchMethod: (params, sortStr) => {
            this.getTableData(params, sortStr);
          },
          queryData: {
            page: 1,
            pageSize: 15,
          },
          searchArr: [
            {
              type: "select",
              label: "工作票类型",
              model: "type",
              option: this.$store.getters["dirtData"]("ticket_work_type"),
            },
            {
              type: "organization",
              label: "开票单位",
              model: "unitName",
              idsStr: "unit",
              placeholder: "请选择或输入",
            },
            {
              type: "input",
              label: "标题",
              model: "title",
              placeholder: "请输入",
            },
            {
              type: "select",
              label: "状态",
              model: "statusList",
              multiple: true,
              option: this.$store.getters["dirtData"]("ticket_work_status"),
            },
            {
              type: "datetimerange",
              label: "计划起止时间",
              model: "estimatedTime",
            },
            {
              type: "location",
              label: "工作地点",
              model: "locationName",
              idsStr: "location",
              placeholder: "请选择或输入",
            },
            {
              type: "input",
              label: "工作票票号",
              model: "code",
              placeholder: "请输入",
            },
            {
              type: "select",
              label: "是否外单位",
              model: "externalFlag",
              option: [
                { label: "是", value: 1 },
                { label: "否", value: 0 },
              ],
            },
            {
              type: "organization",
              label: "工作班组",
              model: "team",
              placeholder: "请选择或输入",
            },
            {
              type: "userOnly",
              label: "工作负责人",
              model: "directorName",
              placeholder: "请选择或输入",
            },
            {
              type: "datetimerange",
              label: "填票时间",
              model: "createTime",
            },
          ],
        },
        // 新建下拉数据
        dropdownList: this.$store.getters["dirtData"]("ticket_work_type"),
        // 下拉方法
        addDropdown: {
          disabled: !this.$store.getters.isBtnAuth("addGroup"),
          content: "未授权的功能",
          method: (val) => {
            this.toAdd(val);
          },
        },
        // 操作按钮
        actionList: [
          {
            name: "历史导入",
            icon: "icon-daoru",
            disabled: !this.$store.getters.isBtnAuth("historyImport"),
            content: "未授权的功能",
            method: () => {
              this.openImport("historyImport");
            },
          },
          {
            name: "样票导入",
            icon: "icon-daoru",
            disabled: !this.$store.getters.isBtnAuth("sampleImport"),
            content: "未授权的功能",
            method: () => {
              this.openImport("sampleImport");
            },
          },
        ],
        // 过滤器的值
        filterFormData: {},
        // 过滤器的默认值
        defaultFilterData: {},
        userCustomData: [],
        // 表头
        column: [
          {
            label: "状态",
            prop: "status",
            sortable: true,
            formatter: (row) => {
              let types = this.$store.getters["dirtData"]("ticket_work_status");
              let val = row.status;
              let obj = types.find((i) => i.value == val);
              return obj ? obj.label : val;
            },
            width:"110px",
          },
          {
            label: "工作票票号",
            prop: "code",
            sortable: true,
            width: "120px",
          }, 
          {
            label: "标题",
            prop: "title",
            sortable: true,
            width: "280px",
          },
          {
            label: "工作票类型",
            prop: "type",
            sortable: true,
            formatter: (row) => {
              let types = this.$store.getters["dirtData"]("ticket_work_type");
              let val = row.type;
              let obj = types.find((i) => i.value == val);
              return obj ? obj.label : val;
            },
            minWidth: "140px",
          },
          {
            label: "开票单位",
            prop: "unitName",
            sortable: true,
            showTooltip:true,
            minWidth: "120px",
          },
          {
            label: "工作负责人",
            prop: "directorName",
            sortable: true,
            minWidth: "120px",
          },
          {
            label: "工作班组",
            prop: "team",
            sortable: true,
            showTooltip: true,
            minWidth: "200px",
          },
          {
            label: "工作地点",
            prop: "locationName",
            sortable: true,
            minWidth: "120px",
          },
          {
            label: "计划开始时间",
            prop: "estimatedStartTime",
            sortable: true,
            minWidth: "150px",
          },
          {
            label: "计划结束时间",
            prop: "estimatedEndTime",
            sortable: true,
            minWidth: "150px",
          },
          {
            label: "当前环节",
            prop: "curNodeName",
            sortable: true,
            showTooltip: true,
            minWidth: "150px",
          },
          {
            label: "当前处理人",
            prop: "curNodeUserName",
            sortable: true,
            showTooltip: true,
            minWidth: "150px",
          },
        ],
        // 表格方法
        tableMethods: {
          //点击行的方法
          rowClick: (val) => {
            let pageType = "details";
            if (this.$store.getters.isBtnAuth("edit")) {
              pageType = "edit";
            }
            this.getDetails(val.id, pageType, val.type);
          },
        },
      },
    };
  },
  created() {
    let query = JSON.parse(JSON.stringify(this.$route.query));
    if (JSON.stringify(query) != "{}") {
      this.tableSetting.defaultQueryFirst = true;
      if (query.estimatedStartTime) {
        query.estimatedStartTime = query.estimatedStartTime + " 00:00";
      }
      if (query.estimatedEndTime) {
        query.estimatedEndTime = query.estimatedEndTime + " 23:59";
      }
      query.estimatedTime = [query.estimatedStartTime, query.estimatedEndTime];
      this.tableSetting.searchObj.queryData = Object.assign(
        this.tableSetting.searchObj.queryData,
        query
      );
    } else {
      let query = {
        // statusList: ["1", "2", "3", "4", "5", "6", "7"],
        // unit:
        //   this.$store.state.user.userInfo.orgId ||
        //   this.$store.state.user.userInfo.deptId,
        // unitName:
        //   this.$store.state.user.userInfo.orgName ||
        //   this.$store.state.user.userInfo.deptName,
      };
      this.tableSetting.searchObj.queryData = Object.assign(
        this.tableSetting.searchObj.queryData,
        query
      );
    }
    /* 添加监听事件 */
    window.addEventListener("storage", this.updateData);
  },
  beforeDestroy() {
    /* 删除监听事件 */
    window.removeEventListener("storage", this.updateData);
  },
  mounted() {
    this.$refs.tableRef.getTableConfig();
    //this.updateData();
  },
  methods: {
    //更新列表页的数据
    updateData() {
      this.$refs.tableRef.searchData();
    },
    // 查询表格数据
    async getTableData(params, sortStr) {
      let queryData = Object.assign({}, params);
      if (sortStr.length > 0) {
        queryData.orders = sortStr;
      }
      if (queryData.estimatedTime) {
        queryData.estimatedStartTime = queryData.estimatedTime[0];
        queryData.estimatedEndTime = queryData.estimatedTime[1];
        delete queryData.estimatedTime;
      }
      if (queryData.createTime) {
        queryData.startCreateTime = queryData.createTime[0];
        queryData.endCreateTime = queryData.createTime[1];
        delete queryData.createTime;
      }
      getWorkTicketList(queryData)
        .then((list) => {
          this.$set(this.tableSetting, "tableData", list.data.list);
          this.$set(this.tableSetting, "totalNumber", list.data.total);
        })
        .catch((e) => {
          this.$set(this.tableSetting, "tableData", []);
          this.$set(this.tableSetting, "totalNumber", 0);
        });
    },
    // 跳转至详情页,携带参数分别为：数据id、页面类型、工作票类型
    getDetails(val, type, ticketType) {
      const { href } = this.$router.resolve({
        name: "workTicketProcessingDetails",
        query: {
          val: val,
          pageType: type,
          ticketType: ticketType || "",
        },
      });
      window.open(href, "_blank");
    },
    // 新建
    async toAdd(val) {
      // let pageType = "details";
      // if (this.$store.getters.isBtnAuth("edit")) {
      //   pageType = "edit";
      // }
      this.getDetails("addVal", "add", val.value);
    },
    // 导入
    openImport(componentName) {
      this.showDialog = true;
      if (componentName === "historyImport") {
        this.dialogTitle = "历史导入列表";
      } else if (componentName === "sampleImport") {
        this.dialogTitle = "样票导入列表";
      } else {
        this.dialogTitle = "导入列表";
      }
      this.isComponent = componentName;
    },
    // 弹框确认
    dialogSubmit() {
      let selectData = this.$refs.dialogRef.getSelectData();
      if (!selectData) {
        this.$message.warning("请选择一行数据！");
      } else {
        this.showDialog = false;
        this.getDetails(selectData.id, this.isComponent, selectData.type);
      }
    },
  },
};
</script>
<style lang="less" scoped>
.container {
  /deep/ .el-icon-plus {
    margin-right: 10px;
  }
}
.flow-column {
  display: flex;
  flex-flow: column nowrap;
}
</style>